<template>
	<div class="endLive">

		<div class="endLiveCont">
			<div class="bjImg">
				<image src="@/static/image/user/bj.png" mode="" class=""></image>
			</div>

			<!-- <div class="endLiveCenter">
				<div class="endLiveCont_back" @click="appFinish()">
					<image src="@/static/image/left.png" mode="" class="endLiveCont_back_img"></image> <span>编辑{{ liveMode==1?'直播':'录播' }}</span>

				</div>
			</div> -->
			<u-navbar leftText="编辑直播" @leftClick="appFinish" leftIconColor="#1D2129" bgColor="transparent">
			</u-navbar>
			<div class="LiveBox">
				<div class="u-tabs-zzj">
					<div class="u-tabs-box">
						<u-tabs :list="userTabList" lineWidth="60" lineHeight="2" lineColor="#295FFF" :activeStyle="{
							color: '#295FFF',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
	color: '#8F969E',
	transform: 'scale(1)'
}" itemStyle="padding-left: 12px; padding-right: 12px; height: 44px;" @change='tabChange'>
						</u-tabs>
					</div>
				</div>
				<div class="LiveBoxCont">
					<liveInformation v-if="liveIndex == 0" :liveId='liveId' :liveMode="liveMode"></liveInformation>
					<basicSetup v-if="liveIndex == 1" :setInfo='setInfo' :liveId='liveId'></basicSetup>
					<viewingSettings v-if="liveIndex == 2" :setInfo='setInfo' :liveId='liveId'></viewingSettings>
					<sharingSettings v-if="liveIndex == 3" :setInfo='setInfo' :liveId='liveId' :liveInfo="liveInfo">
					</sharingSettings>
					<setLive v-if="liveIndex == 4" :setInfo='setInfo' :liveId='liveId' :liveInfo="liveInfo"></setLive>
					<div class="zj_space">

</div>
				</div>
			
			</div>
			<!-- content -->
		</div>
	</div>
</template>

<script>
import liveInformation from './components/liveInformation.vue'
import basicSetup from './components/basicSetup.vue'
import viewingSettings from './components/viewingSettings'
import sharingSettings from './components/sharingSettings.vue'
import setLive from './components/setLive.vue'

export default {
	components: {
		liveInformation,
		basicSetup,
		viewingSettings,
		sharingSettings,
		setLive,
	},
	filters: {
		formatDate(v) {
			if (v == 0) {
				return '-'
			}
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		},
	},
	data() {
		return {
			params: {
				customerId: '1803713742077173760',
			},
			liveId: '1806603471302955008',
			loading: false,
			tagList: [],
			from: {
				name: ''
			},
			isMask: false,
			eitFrom: {},
			userTabList: [{
				name: '直播信息',
				status: '0'
			}, {
				name: '基础设置',
				status: '1'

			}, {
				name: '观看限制',
				status: '2'
			}, {
				name: '分享设置',
				status: '3'
			}, {
				name: '观看页设置',
				status: '4'
			}],
			liveIndex: 0,
			setInfo: {

			},
			isApplyShow: false,
			liveInfo: {

			},
			liveMode: 1,//1为直播，2为录播
		}
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.tagList = []
		this.loading = false
		this.getTagList()
		this.getLiveGetSetting()
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = this.liveId = opt.liveId || '1803713742077173760'
		}
		this.getLiveGet() //获取用户详情
		this.getLiveGetSetting()
	},
	methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
		// 获取直播信息
		async getLiveGet() {
			const {
				data
			} = await this.$request(this.$Api.liveGet, {
				liveId: this.liveId
			}, "get")
			if (data.code != 200) return
			this.liveInfo = data.data
			this.liveMode = data.data.mode
		},
		// 关闭弹窗
		closeProductMaskEvnet() {

		},
		// 获取到设置
		async getLiveGetSetting() {
			const {
				data
			} = await this.$request(this.$Api.liveGetSetting, {
				liveId: this.liveId
			}, "get")
			if (data.code != 200) return
			this.setInfo = data.data
			console.log('setInfosetInfo', this.setInfo)
		},
		tabChange(e) {
			this.setInfo = ''
			this.liveIndex = e.status
			this.getLiveGetSetting()
		},
	}
}
</script>

<style lang="scss">
.endLive {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	height: 100vh;
	overflow: hidden;
	background: #FAFBFF !important;
	padding-bottom: 320rpx;
}

.LiveBox {
	width: 100%;
	min-height: 100rpx;
	// background: #FFFFFF;
	border-radius: 16rpx;
	// padding:  0  32rpx 32rpx 32rpx;
	margin-top: 90rpx;
	z-index: 9;
	position: absolute;

	// left: 32rpx;
	.u-tabs-zzj {
		border-bottom: 2rpx solid #E3E8EE;
	}

	.u-tabs-box {
		// padding-right: 32rpx;
		font-size: 22rpx !important;
	}

	.LiveBoxCont {
		width: 100%;
		padding: 0 32rpx;
		margin-top: 20rpx;
		width: 100%;
		height: calc(100vh - 420rpx) !important;
		overflow-y: scroll;
	}
}

.userTagBtn {
	width: 750rpx;
	height: 166rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	.userTagBtn_text {
		width: 640rpx;
		height: 80rpx;
		background: #295FFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
	}

}





.endLiveCont {
	width: 100%;
	// height: 100vh;
	position: relative;
	padding: 30rpx 0;
	box-sizing: border-box;
	color: #fff;
	// overflow-y: scroll;



	.endLiveCenter {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 0;
		box-sizing: border-box;
		overflow-y: scroll;
		z-index: 2;

	}

	.bjImg {
		width: 100%;
		min-height: 1628rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: #FAFBFF;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.endLiveCont_back {
		width: 100%;
		height: 80rpx;
		float: left;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.endLiveCont_back_img {
			width: 50rpx;
			height: 50rpx;
			float: left;
			position: absolute;
			top: 15rpx;
		}

		span {
			font-size: 28rpx;
			margin-left: 60rpx;
			color: #1D2129;
			line-height: 80rpx;
		}

		.useLable {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 172rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 2rpx solid #295EFF;
			margin-right: 32rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			color: #295EFF;
			font-size: 24rpx;
			line-height: 44rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}



}
</style>